<template>
	<div class="vip-benefits grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[10px] pt-4">
		<template v-for="item in list" :key="item.name">
			<div
				v-if="item.isShow"
				class="rounded-[10px] flex flex-col justify-center items-center p-[15px] h-[200px] text-center relative"
				:class="[`${item.name}`, { 'cursor-pointer': item.link }]"
				@click.stop="onClickDetail(item)">
				<coming-soon v-if="item.isComingSoon" />
				<base-image :src="`activity/vip-benefits/${item.name}.png`" class="lg:h-[88px] h-[44px]" />
				<p class="text-warning font-black pt-3 app-font-heavy">{{ item.title }}</p>
				<p
					v-if="checkHtml(item.content)"
					v-html="item.content"
					class="text-sm text-white whitespace-pre-line"
					:class="contentClass" />
				<p class="text-sm text-white" :class="contentClass" v-else-if="item.translation">
					<!--					{{ item.content }}-->
					<i18n-t :keypath="item.content" scope="global">
						<template #livechat>
							<span
								@click.stop="customerService()"
								class="cursor-pointer text-warning link-live-chat">
								{{ $t('vipRequirements.liveChat') }}
							</span>
						</template>
					</i18n-t>
				</p>
				<p class="text-sm text-white" :class="contentClass" v-else>
					{{ item.content }}
				</p>
			</div>
		</template>
	</div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { BaseImage } from '@/components/base'
import ComingSoon from '../coming-soon/index.vue'
import { customerService, goDetails } from '@/utils'

defineProps({
	list: Array as PropType<any>,
	contentClass: String as PropType<any>
})

const checkHtml = (content: any) => {
	return /<[a-z][\s\S]*>/i.test(content)
}

const onClickDetail = (item: any) => {
	if (item.link) {
		goDetails(item.link)
	}
}
</script>

<style scoped>
.first-deposit {
	background: linear-gradient(180deg, #42781e 0%, #255741 30.41%, #2b5547 69.75%, #4a9c33 100%);
}
.reload-bonus {
	background: linear-gradient(180deg, #840c88 0%, #471a5c 29.72%, #3d2755 69.06%, #8f2092 100%);
}
.level-up-bonus {
	background: linear-gradient(180deg, #7b240b 0%, #551a1d 30.41%, #412935 69.75%, #68482f 100%);
}
.weekly-bonus {
	background: linear-gradient(180deg, #11778e 0%, #174e5f 29.72%, #234c5f 69.06%, #2086a2 100%);
}
.weekly-cashback {
	background: linear-gradient(180deg, #917b0a 0%, #5f5e22 29.72%, #4c5241 69.06%, #84852b 100%);
}
.rebates {
	background: linear-gradient(180deg, #112e8c 0%, #1b1f58 29.72%, #1f2456 69.06%, #2047a5 100%);
}
.vip-xp-boost {
	background: linear-gradient(180deg, #840c88 0%, #471a5c 29.72%, #3d2755 69.06%, #8f2092 100%);
}
.vip-transfer {
	background: linear-gradient(180deg, #7b240b 0%, #551a1d 30.41%, #412935 69.75%, #68482f 100%);
}
</style>
